<template>
  <div class="recommend">
    <!-- iscroll组件 -->
    <scrollView>
      <div>
        <MySwiper :swiperArr="swiperArr"></MySwiper>
        <!-- 推荐歌单模块 -->
        <Personalized
          :resultArr="resultArr"
          @toDetailInfo="toDetailInfo"
          :title="'推荐歌单'"
          :typeClass="Personalized"
        ></Personalized>
        <!-- 最新专辑模块 -->
        <Personalized
          @toDetailInfo="toDetailInfo"
          :resultArr="albumsArr"
          :title="'最新专辑'"
          :typeClass="album"
        ></Personalized>
        <!-- 最新音乐 -->
        <SongList :songsArr="songsArr"></SongList>
      </div>
    </scrollView>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { ApiGetBanner, ApiGetPersonalized, ApiGetNewest, ApiGetNewSong } from '@/api/index'
import MySwiper from '../components/MyWsiper'
import Personalized from '../components/Personalized'
import SongList from '../components/SongList'
import scrollView from '../components/scrollView'
export default {
  components: {
    MySwiper,
    Personalized,
    SongList,
    scrollView
  },
  data () {
    return {
      swiperArr: [],
      resultArr: [],
      albumsArr: [],
      songsArr: [],
      Personalized: 'Personalized',
      album: 'album'
    }
  },
  methods: {
    async getBanner () {
      const res = await ApiGetBanner()
      this.swiperArr = res.banners
    },
    // 获取推荐歌单
    async getPersonalized () {
      const res = await ApiGetPersonalized()
      this.resultArr = res.result
    },
    // 获取最新专辑
    async getNewest () {
      const res = await ApiGetNewest()
      // 截取数据 从0开始到6结束
      this.albumsArr = res.albums.splice(0, 6)
    },
    // 推荐最新音乐
    async getNewSong () {
      const res = await ApiGetNewSong()
      this.songsArr = res.result
    },
    // 跳转到歌单详情页面
    toDetailInfo (id, type) {
      this.$router.push(`recommend/details/${id}/${type}`)
    }
  },
  created () {
    this.getBanner()
    this.getPersonalized()
    this.getNewest()
    this.getNewSong()
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  position: fixed;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.v-enter {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0%);
}
.v-enter-active {
  transition: transform 1s;
}
.v-leave {
  transform: translateX(0%);
}
.v-leave-to {
  transform: translateX(100%);
}
.v-leave-active {
  transition: transform 1s;
}
</style>
